<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jc</title>
    
    <link rel="stylesheet" href="./css/index.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

    <!-- use owl -->
    <link rel="stylesheet" href="./css/owl.carousel.min.css">
    <link rel="stylesheet" href="./css/owl.theme.default.css">

    <!-- use aos -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
    <!---------------------- Navigation section ------------------------>
    <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="#" class='text-gray'>Bloger</a>
            </div>
            <div class="toggle-collapse">
                <div class="toggle-icons">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
            <div>
                <ul class="nav-items">
                    <li class="nav-link">
                        <a href="#">Home</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Category</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Pages</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>
            <div class="socal text-gray">
                <!-- 要修改一下复制过来的标签 -->
                <a href="#"><i class="fab fa-weixin" aria-hidden="true"></i></a>
                <a href="#"><i class="fab fa-weibo" aria-hidden="true"></i></a>
                <a href="#"><i class="fab fa-qq" aria-hidden="true"></i></a>
            </div>
        </div>
    </nav>
    <!------------x---------- Navigation section ------------x------------>

    <!---------------------- main section ------------------------>
    <main>
        <!---------------------- site title section ------------------------>
        <section class='site-title'>
            <div class="site-background">
                <h3>Tours & travel</h3>
                <h1>some place on earth</h1>
                <button class='btn'>Explore</button>
            </div>
        </section>
        <!-----------x----------- site title section ---------------x--------->

        <!---------------------- Blog carousel section ------------------------>
        <section class="container">
            <div class="blog">
                <div class="owl-carousel owl-theme blog-post ">
                    <div class="blog-content"  data-aos="fade-right"  data-aos-delay="200">
                        <img src="./assets/Blog-post/post-1.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                            <button class="btn btn-blog">Lorem.</button>
                            <span>Lorem, ipsum.</span>
                        </div>
                    </div>
                    <div class="blog-content" data-aos="fade-in"  data-aos-delay="200">
                        <img src="./assets/Blog-post/post-2.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                            <button class="btn btn-blog">Lorem.</button>
                            <span>Lorem, ipsum.</span>
                        </div>
                    </div>
                    <div class="blog-content" data-aos="fade-left"  data-aos-delay="200">
                        <img src="./assets/Blog-post/post-3.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                            <button class="btn btn-blog">Lorem.</button>
                            <span>Lorem, ipsum.</span>
                        </div>
                    </div>
                    <div class="blog-content" data-aos="fade-right"  data-aos-delay="200">
                        <img src="./assets/Blog-post/post-4.png" alt="post-1">
                        <div class="blog-title">
                            <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                            <button class="btn btn-blog">Lorem.</button>
                            <span>Lorem, ipsum.</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-----------x----------- Blog carousel section -------------x----------->

        <!---------------------- site content section ------------------------>
        <section class="container">
            <div class="site-content">
                <!-- left content -->
                <div class="posts">
                    <div class="post-content" data-aos="zoom-in"  data-aos-delay="200">
                        <div class="post-image">
                            <div>
                                <img src="./assets/Blog-post/blog1.png" alt="">
                            </div>
                            <div class="post-info flex-row">
                                <span>
                                    <i class="fa fa-user text-gray" aria-hidden="true"></i>&nbsp;&nbsp;Jack
                                </span>
                                <span>
                                    <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                </span>
                                <span>
                                    2 comment
                                </span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laudantium maiores consequuntur explicabo corporis voluptatem!
                            </a>
                            <p>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repudiandae cum quidem harum deleniti doloremque temporibus! Odit dolore ullam autem sit excepturi. Maxime, rem aperiam?
                            </p>
                            <button class='btn post-btn'>Read More &nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <hr>
                    <div class="post-content" data-aos="zoom-in"  data-aos-delay="200">
                        <div class="post-image">
                            <div>
                                <img src="./assets/Blog-post/blog2.png" alt="">
                            </div>
                            <div class="post-info flex-row">
                                <span>
                                    <i class="fa fa-user text-gray" aria-hidden="true"></i>&nbsp;&nbsp;Jack
                                </span>
                                <span>
                                    <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                </span>
                                <span>
                                    2 comment
                                </span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laudantium maiores consequuntur explicabo corporis voluptatem!
                            </a>
                            <p>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repudiandae cum quidem harum deleniti doloremque temporibus! Odit dolore ullam autem sit excepturi. Maxime, rem aperiam?
                            </p>
                            <button class='btn post-btn'>Read More &nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <hr>
                    <div class="post-content" data-aos="zoom-in"  data-aos-delay="200">
                        <div class="post-image">
                            <div>
                                <img src="./assets/Blog-post/blog3.png" alt="">
                            </div>
                            <div class="post-info flex-row">
                                <span>
                                    <i class="fa fa-user text-gray" aria-hidden="true"></i>&nbsp;&nbsp;Jack
                                </span>
                                <span>
                                    <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                </span>
                                <span>
                                    2 comment
                                </span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laudantium maiores consequuntur explicabo corporis voluptatem!
                            </a>
                            <p>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repudiandae cum quidem harum deleniti doloremque temporibus! Odit dolore ullam autem sit excepturi. Maxime, rem aperiam?
                            </p>
                            <button class='btn post-btn'>Read More &nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <hr>
                    <div class="post-content" data-aos="zoom-in"  data-aos-delay="200">
                        <div class="post-image">
                            <div>
                                <img src="./assets/Blog-post/blog4.png" alt="">
                            </div>
                            <div class="post-info flex-row">
                                <span>
                                    <i class="fa fa-user text-gray" aria-hidden="true"></i>&nbsp;&nbsp;Jack
                                </span>
                                <span>
                                    <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                </span>
                                <span>
                                    2 comment
                                </span>
                            </div>
                        </div>
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laudantium maiores consequuntur explicabo corporis voluptatem!
                            </a>
                            <p>
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis repudiandae cum quidem harum deleniti doloremque temporibus! Odit dolore ullam autem sit excepturi. Maxime, rem aperiam?
                            </p>
                            <button class='btn post-btn'>Read More &nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    <div class="pagination flex-row">
                        <a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                        <a href="#" class='pages'>1</a>
                        <a href="#" class='pages'>2</a>
                        <a href="#" class='pages'>3</a>
                        <a href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                <!--x left content x -->

                <!-- right content -->
                <aside class="sidebar">
                    <div class="category">
                        <h2>Category</h2>
                        <ul class="category-list">
                            <li class="list-item" data-aos="fade-left"  data-aos-delay="100">
                                <a href="#">Software</a>
                                <span>(05)</span>
                            </li>
                            <li class="list-item" data-aos="fade-left"  data-aos-delay="200">
                                <a href="#">Techology</a>
                                <span>(04)</span>
                            </li>
                            <li class="list-item" data-aos="fade-left"  data-aos-delay="300">
                                <a href="#">Linux</a>
                                <span>(06)</span>
                            </li>
                            <li class="list-item" data-aos="fade-left"  data-aos-delay="400">
                                <a href="#">javascript</a>
                                <span>(02)</span>
                            </li>
                            <li class="list-item" data-aos="fade-left"  data-aos-delay="500">
                                <a href="#">python</a>
                                <span>(01)</span>
                            </li>
                        </ul>
                    </div>
                    <div class="popular-post">
                        <h2>Popular post</h2>
                        <div class="post-content" data-aos="flip-up"  data-aos-delay="200">
                            <div class="post-image">
                                <div>
                                    <img src="./assets/popular-post/m-blog-1.jpg" alt="">
                                </div>
                                <div class="post-info flex-row">
                                    <span>
                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                    </span>
                                    <span>
                                        2 comment
                                    </span>
                                </div>
                            </div>
                            <div class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
                            </div>
                        </div>
                        <div class="post-content" data-aos="flip-up"  data-aos-delay="300">
                            <div class="post-image">
                                <div>
                                    <img src="./assets/popular-post/m-blog-2.jpg" alt="">
                                </div>
                                <div class="post-info flex-row">
                                    <span>
                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                    </span>
                                    <span>
                                        2 comment
                                    </span>
                                </div>
                            </div>
                            <div class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
                            </div>
                        </div>
                        <div class="post-content" data-aos="flip-up"  data-aos-delay="400">
                            <div class="post-image">
                                <div>
                                    <img src="./assets/popular-post/m-blog-3.jpg" alt="">
                                </div>
                                <div class="post-info flex-row">
                                    <span>
                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                    </span>
                                    <span>
                                        2 comment
                                    </span>
                                </div>
                            </div>
                            <div class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
                            </div>
                        </div>
                        <div class="post-content" data-aos="flip-up"  data-aos-delay="500">
                            <div class="post-image">
                                <div>
                                    <img src="./assets/popular-post/m-blog-4.jpg" alt="">
                                </div>
                                <div class="post-info flex-row">
                                    <span>
                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                    </span>
                                    <span>
                                        2 comment
                                    </span>
                                </div>
                            </div>
                            <div class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
                            </div>
                        </div>
                        <div class="post-content" data-aos="flip-up"  data-aos-delay="600">
                            <div class="post-image">
                                <div>
                                    <img src="./assets/popular-post/m-blog-5.jpg" alt="">
                                </div>
                                <div class="post-info flex-row">
                                    <span>
                                        <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;jan 1 2021
                                    </span>
                                    <span>
                                        2 comment
                                    </span>
                                </div>
                            </div>
                            <div class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
                            </div>
                        </div>
                    </div>
                    <div class="newsletter">
                        <h2>Newsletter</h2>
                        <div class="for-element">
                            <input type="text" class="input-element">
                            <button class="btn form-btn">Subscribe</button>
                        </div>
                    </div>
                </aside>
                <!--x right content x-->
            </div>
        </section>
        <!---------------------- site content section ------------------------>

    </main>
    <!-----------x----------- main section -------------x----------->
<!-- jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="./js/owl.carousel.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="./js/main.js"></script>
</body>
</html>